Tips Trik Cloud Services

Deploy Gratis bersama Ngrok dan Expose

  • Gilang V. Perdana
  • 09 Sep 2021
  • dilihat 620

Expose - Ngrok 

$ ngrok http

Disana saya menuliskan $ ngrok http 8080 karena aplikasi Vue.js saya berjalan pada port 8080. Setelah mengetikkan perintah tersebut, sekarang kita bisa klik enter pada Ngrok dan akan terlihat tampilan Ngrok cmd menjadi seperti ini:

Terlihat, bahwa http server localhost:8080 di forward ke https://50482b3d103a.ngrok.io (ini adalah ip generate random dari generate yang bisa kita akses di public). Jika sudah, kita bisa mencoba akses untuk membuktikannya.

Terihat gambar kiri adalah akses langsung dari localhost dan gambar kanan adalah akses dari tunnel Ngrok. Namun, ada sedikit kendala disini yaitu tunneling dari Ngrok tidak bisa membaca aplikasi Vue.js kita dengan error “Invalid Host Header”. Mengapa? Ini disebabkan karena Vue.js memiliki header custom pada saat $ npm run serve , Mari kita lihat.

Terlihat, bahwa setelah npm run serve aplikasi “hanya boleh” diakses jika melalui localhost:8080 atau 192.168.0.186:8080 atau dengan kata lain, jika kita mengakses dengan identitas lain (seperti url tunnel kita yaitu https://50482b3d103a.ngrok.io) maka Vue.js akan menolak. Lalu bagaimana? Ngrok menyediakan fitur custom header dan tentunya masih banyak fitur lagi yang bisa kalian baca baca pada dokumentasi website resminya di https://ngrok.com/ . Baiklah, kita akan mencoba untuk expose ulang dengan menggunakan custom header yang diminta Vue.js agar kita bisa akses menggunakan tunneling Ngrok.